<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    <meta name="viewport" content="width=device-width, initial-scale=1">-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

    <title>Title</title>

<!--    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">-->
    <link href="/dev/views/slx/layui/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="/dev/views/slx/css/index.css">
    <link rel="stylesheet" href="/dev/views/cxy/css/playerto.css">
    <link rel="stylesheet" href="/dev/plugins/zeroModal.css">
    <link rel="stylesheet" href="/dev/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
<!--    <link rel="stylesheet" href="/dev/views/slx/css/nav.css">-->
    <style>
        #QPlayer{
            z-index:200;
        }
    </style>
</head>
<body>
<div id="app"></div>

<!--播放器-->
<div id="QPlayer">
    <div id="pContent">

        <div id="player">
            <span class="cover"></span>
            <div class="ctrl">
                <div class="musicTag marquee">
                    <strong>Title</strong>
                    <span> - </span>
                    <span class="artist">Artist</span>
                </div>
                <div class="progress">
                    <div class="timer left">0:00</div>
                    <div class="contr">
                        <div class="rewind icon"></div>
                        <div class="playback icon"></div>
                        <div class="fastforward icon"></div>
                    </div>
                    <div class="right">
                        <div class="liebiao icon"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ssBtn" style="background:#000 none repeat scroll 0% 0%">
            <div class="adf"></div>
        </div>
    </div>
    <ol id="playlist"></ol>
</div>

<!-- 大盒子 -->
<div class="box">
    <!-- 左侧按钮 -->
    <a href="javascript:;" class="lef">&lt</a>
    <!-- 右侧按钮 -->
    <a href="javascript:;" class="righ">&gt</a>
    <!-- 轮播图片 -->
    <ul class="imgs" >
        <li class="one">
            <a href="/dev/views/cxy/views/gedanzhuye1.html?id=2">
                <img src="/dev/views/slx/img/y1.jpg">
            </a>
        </li>
        <li class="two">
            <a href="/dev/views/cxy/views/gedanzhuye1.html?id=7" >
                <img src="/dev/views/slx/img/y2.jpg">
            </a>
        </li>
        <li class="three">
            <a href="/dev/views/cxy/views/gedanzhuye1.html?id=3"><img src="/dev/views/slx/img/y3.jpg" alt=""></a>
        </li>
        <li class="four">
            <a href="/dev/views/cxy/views/gedanzhuye1.html?id=5"><img src="/dev/views/slx/img/y4.jpg">
            </a>
        </li>
        <li class="five">
            <a href="/dev/views/cxy/views/gedanzhuye1.html?id=8"><img src="/dev/views/slx/img/y5.jpg" alt=""></a>
        </li>
        <li class="six">
            <a href="/dev/views/cxy/views/gedanzhuye1.html?id=12"><img src="/dev/views/slx/img/y6.jpg" >
            </a>
        </li>
        <li class="six">
            <a href="/dev/views/cxy/views/gedanzhuye1.html?id=15"><img src="/dev/views/slx/img/y7.jpg" >
            </a>
        </li>
    </ul>
    <ul class="list">
    </ul>
    <div class="rights"></div>
    <div class="lefts"></div>
</div>
<!-- 主体 -->
<div class="mainWrap">
    <!-- 中间页面 -->
    <div class="middlewrap">
        <div class="rmtj">
            <div class="rhot">
                <a href="javascript:;" class="rmtjtitle glyphicon glyphicon-heart-empty">热门推荐</a>
                <div class="rmtjtab">
                    <a class="sf f12" href="/dev/views/cxy/views/gedanzhuye1.html?id=6">清新</a>
                    <span class="line">|</span>
                    <a class="sf f12" href="/dev/views/cxy/views/gedanzhuye1.html?id=17">动感</a>
                    <span class="line">|</span>
                    <a class="sf f12" href="/dev/views/cxy/views/gedanzhuye1.html?id=21">静谧</a>
                    <span class="line">|</span>
                    <a class="sf f12" href="/dev/views/cxy/views/gedanzhuye1.html?id=11">清晨</a>
                    <span class="line">|</span>
                    <a class="sf  f12" href="/dev/views/cxy/views/gedanzhuye1.html?id=23">夜晚</a>
                </div>
                <span class="more" style="margin-top: -15px;">
                        <a href="/dev/views/cxy/views/gedanyemian.html" class="sf">更多</a>
                        <i class="cs sg glyphicon glyphicon-arrow-right">&nbsp;</i>
                    </span>
            </div>
            <!-- 歌曲列表 -->
            <ul class="rmtjcontent" id="rmtjcontent">
            </ul>
        </div>
        <div class="rhot">
            <a href="javascript:;" class="rmtjtitle glyphicon glyphicon-heart-empty">歌手</a>
            <span class="more">
                    <a href="/dev/views/czn/views/singer.html" class="sf">更多</a>
                    <i class="cs sg glyphicon glyphicon-arrow-right">&nbsp;</i>
                </span>
        </div>
        <!-- 新碟上架轮播 -->
        <div class="xdsjwrap">
<!--            <a href="javascript:;" class="leftbtn"></a>-->
            <div class="roll">
                <ul class="song" id="song2" style="margin-left: 40px;">

                </ul>
            </div>

<!--            <a href="javascript;:" class="rightbtn"></a>-->
        </div>
        <div class="rhot">
            <a href="javascript:;" class="rmtjtitle glyphicon glyphicon-heart-empty">榜单</a>
            <span class="more">
                    <a href="" class="sf">更多</a>
                    <i class="cs sg glyphicon glyphicon-arrow-right">&nbsp;</i>
                </span>
        </div>
        <!-- 榜单主体 -->
        <div class="hlist">
            <!-- 左 -->
            <div class="sublist">
                <dl>
                    <dt>
                        <img src="https://p3.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg">
                        <a href="javascript:;" class="msk" title="飙升榜"></a>
                        <!-- <div class="tit"> -->
                        <a href="javascript:;" class="tit" title="飙升榜">飙升榜</a>
                        <a href="javascript:;" class="tit1" title="播放"></a>
                        <a href="javascript:;" class="tit2" title="收藏"></a>
                        <!-- </div> -->
                    </dt>
                    <dd>
                        <ul class="songlist" id="song1">
                        </ul>
                    </dd>
                </dl>
            </div>
            <!-- 中 -->
            <div class="sublist">
                <dl>
                    <dt>
                        <img src="https://p3.music.126.net/wVmyNS6b_0Nn-y6AX8UbpQ==/109951166952686384.jpg">
                        <a href="javascript:;" class="msk" title="新歌榜"></a>
                        <!-- <div class="tit"> -->
                        <a href="javascript:;" class="tit" title="新歌榜">新歌榜</a>
                        <a href="javascript:;" class="tit1" title="播放"></a>
                        <a href="javascript:;" class="tit2" title="收藏"></a>
                        <!-- </div> -->
                    </dt>
                    <dd>
                        <ul class="songlist" id="song4">
                        </ul>
                    </dd>
                </dl>
            </div>
            <!-- 右 -->
            <div class="sublist">
                <dl>
                    <dt>
                        <img src="https://p4.music.126.net/iFZ_nw2V86IFk90dc50kdQ==/109951166961388699.jpg">
                        <a href="javascript:;" class="msk" title="原创榜"></a>
                        <!-- <div class="tit"> -->
                        <a href="javascript:;" class="tit" title="原创榜">原创榜</a>
                        <a href="javascript:;" class="tit1" title="播放"></a>
                        <a href="javascript:;" class="tit2" title="收藏"></a>
                        <!-- </div> -->
                    </dt>
                    <dd>
                        <ul class="songlist" id="song3">
                        </ul>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</div>
</div>
<!-- 回顶部 -->

        <button onclick="topf()" class="gotop" id="topbtn" title="回顶部">回到顶部</button>
        <div class="foot">
            <div class="copy">
                <p class="link" id="music-link">
                    <a href="#" class="item sf">服务条款</a>
                    <span class="line">|</span>
                    <a href="#" class="item sf">隐私政策</a>
                    <span class="line">|</span>
                    <a href="#" class="item sf">儿童隐私政策</a>
                    <span class="line">|</span>
                    <a href="#" class="item sf">版权投诉</a>
                    <span class="line">|</span>
                    <a href="#" class="item sf">广告合作</a>
                    <span class="line">|</span>
                    <a href="#" class="item sf">联系我们</a>
                    <span class="line">|</span>
                </p>
            </div>
        </div>
<script src="/dev/plugins/jquery.min.js"></script>
<script src="/dev/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script src="/dev/views/slx/layui/layui.js"></script>
<script src="/dev/views/cxy/js/xiaobofang/jquery.marquee.min.js"></script>
<script>

    // 	var	playlist = [
    // // {title:name,artist:"gname",mp3:"/dev/views/cxy/music/"+name+".mp3",cover:"/dev/views/cxy/music/img/" + img,},
    // {title:"Uptown Funk",artist:"Mark Ronson",mp3:"jq22-1.mp3",cover:"t2.png",},
    // ];
    var time=localStorage.getItem('time');
    // if (time!=null)
    // {

    // }
    // if (time!=0)
    // {
    // 	var isRotate = true;
    // 	var autoplay = true;
    // 	console.log("000")
    // }

    var timet=Math.round(time)
    console.log(timet)
    if (timet!=0)
    {
        var isRotate = true;
        var autoplay = false;

    }else {
        var isRotate = true;
        var autoplay = false;
    }


</script>
<script src="/dev/views/cxy/js/xiaobofang/player.js"></script>
<script>

    function bgChange(){
        var lis= $('.lib');
        for(var i=0; i<lis.length; i+=2)
            lis[i].style.background = 'rgba(246, 246, 246, 0.7)';
    }
    window.onload = bgChange;
</script>


<script>
    $(function () {
        $("#app").load('/dev/views/slx/nav.html');
    })



   //轮播
    window.addEventListener('load',function(){
        //获取元素
        var leftb = document.querySelector('.lef');
        var rightb = document.querySelector('.righ');
        var box = document.querySelector('.box');
        var imgs = box.querySelector('.imgs');
        var imgt = imgs.querySelectorAll('li');
        //自动翻页函数
        var timeone = setInterval(function(){
            rightf();
        },3000);
        //左右按钮的出现
        box.addEventListener('mouseover',function(){
            leftb.style.display = 'block';
            rightb.style.display = 'block';
            //移入时清除定时器
            clearInterval(timeone);
            timeone = null;
        })

        //左右按钮的消失
        box.addEventListener('mouseout',function(){
            leftb.style.display = 'none';
            rightb.style.display = 'none';
            //恢复定时器
            clearInterval(timeone);
            timeone = setInterval(function(){
                rightf();
            },3000)
        })
        //动态生成小圆圈，小圈圈模块
        var list = box.querySelector('.list');
        for(var i = 0;i < imgs.children.length;i++){
            //创建li，加入ul中
            var li =document.createElement('li');
            list.appendChild(li);
            //给小圈圈添加类名
            li.setAttribute('index',i);
            //排他思想，实现点击小圆圈，变色
            li.addEventListener('click',colors);
            //经过小圆圈，切换图片
            li.addEventListener('mouseenter',jump);
        }
        //一开始第二个亮
        list.children[1].className = 'change';
        //变色函数
        function colors(){
            //把所有的小圆圈变白
            for(var i = 0 ; i < list.children.length ; i++){
                list.children[i].className = '';
            }
            //给图片对应的小圆圈上色
            var index = this.getAttribute('index');
            list.children[index].className = 'change';
        }
        //跳转函数
        function jump(){
            var index = this.getAttribute('index');
            var now = num.indexOf('two');
            //计算经过点与当前点的距离
            var dif = Math.max(index,now) - Math.min(index,now);
            // console.log(dis);
            if(index > now){
                while(dif--){
                    rightf();
                }
            }else {
                while(dif--){
                    leftf();
                }
            }
        }
        //小圆圈跟随着图片移动
        var j = 1;
        function colort (){
            for(var i = 0 ; i < list.children.length ; i++){
                list.children[i].className = '';
            }
            if(j >= 6){
                j = 0;
            }else if (j < 0 ){
                j = 5;
            }
            list.children[j].className = 'change';
        }
        //翻页模块
        var num = ['one','two','three','four','five','six'];
        //右翻页
        rightb.addEventListener('click',rightf);
        function rightf(){
            //把数组的最后一个添加到第一个
            num.unshift(num[5]);
            //删除最后一个
            num.pop();
            //重新给li添加类名
            for(var i = 0;i < num.length;i++){
                imgt[i].setAttribute('class',num[i]);
            }
            //通过这个全局变量来让小圆圈的颜色一起变化
            j++;
            colort();
        }
        //左翻页
        leftb.addEventListener('click',leftf)
        function leftf(){
            num.push(num[0]);
            num.shift();
            for(var i = 0;i < num.length;i++){
                imgt[i].setAttribute('class',num[i]);
            }
            j--;
            colort();
        }
        //点击图片实现翻页,这里我是通过在左右两边添加一个盒子来实现的
        var rights = document.querySelector('.rights');
        rights.addEventListener('click',function(){
            rightf();
        })
        var lefts = document.querySelector('.lefts');
        lefts.addEventListener('click',function(){
            leftf();
        })
    })

</script>
<script>
    window.onscroll = function () {
        scrollFunction()
    };

    function scrollFunction() {
        // console.log(121);
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("topbtn").style.display = "block";
        } else {
            document.getElementById("topbtn").style.display = "none";
        }
    }

    // 点击按钮，返回顶部
    function topf() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }

    //歌单
    $(function (){
        $.ajax({
            type:'get',
            url:"http://localhost:8088/dev/gedan/selet",
            success:function(result){
                if(result.code==200) {
                    var arr =result.data
                    console.log(arr)
                    console.log(arr[0].id)

                    loadData(arr)
                }
            }
        })
    })


    //数据的渲染
    function loadData(arr){
        let str=`<ul class="rmtjcontent" id="rmtjcontent">`;
        for(let i=0;i<arr.length;i++){
            str+=`
                <li style="margin-left: 40px ; ">
                    <div class="cove">
                        <img src="http://localhost:8088/dev/views/cxy/img/gedan/${arr[i].image}">
                        <div class="buttom">
                            <a style="right: 10px;bottom: 5px;" class="icon-play pa" title="播放"
                               href="javascript:;"></a>

                            <span class="icon-headset"></span>
                            <span class="number">290万</span>
                        </div>
                    </div>
                    <p class="dec" ><a href="http://localhost:8088/dev/views/cxy/views/gedanzhuye.html?id=${arr[i].id}">${arr[i].title}</a></p>
                </li>`
        }
        str+=`</ul>`

        $("#rmtjcontent").html(str)
    }

//歌手

        $.get(`/dev/singer/select`, function (result) {
        if (result.code == 200) {
            // layer.msg(result.msg);
            // alert(result.msg)
            var arr=result.data;
            let str="";
            for(let i=0;i<5;i++){
                console.log(i)
                console.log(arr[i])
                str+=`<li title="blue" style="margin-left: -45px">
                        <div class="coverimg">
                            <!-- 唱片播放按钮 -->
                            <a title="播放" href="javascript:;" class="cicon-play"></a>
                            <a href="http://localhost:8088/dev/views/czn/views/Introduction.html?id=${arr[i].id}" class="mask"></a>
                            <img src="/dev/views/czn/avatar/${arr[i].singerAvatar}">
                        </div>

                        <p class="singern" title="${arr[i].singerName}">
                            <!-- 歌手名 -->
                            <a href="http://localhost:8088/dev/views/czn/views/Introduction.html?id=${arr[i].id}&name=${arr[i].singerName}">${arr[i].singerName}</a>
                        </p>
                    </li>`
            }
            $(".song").html(str)
        }

    })

    $(function (){
        $.ajax({
            type:'get',
            url:"http://localhost:8088/dev/song/hot",
            success:function(result){
                console.log(result)
                    var arr =result.data
                // console.log(arr)
                    load1(arr)
                    load2(arr)
                    load3(arr)
            }
        })
    })


    //数据的渲染
    function load1(arr){
        const songs = arr.map(obj => {
            const id = Object.keys(obj)[0];
            const name = obj[id];
            return { id, name };
        });
        // 获取 id 数组
        const idArray = songs.map(song => song.id);

        // 获取 name 数组
        const nameArray = songs.map(song => song.name);
        let str=`<!--<ul class="songlist" id="song1">-->`;
        for(let i=0;i<11;i++){
            str+=` <li>
                                <span>${i+1}</span>
                                <a href="http://localhost:8088/dev/views/cxy/bofang.html?id=${idArray[i]}" title="${nameArray[i]}">${nameArray[i]}</a>
                                <div class="lihover">
                                    <a href="http://localhost:8088/dev/views/cxy/bofang.html?id=${nameArray[i]}" title="播放" class="bf"></a>
                                    <a href="javascript:;" title="添加播放列表" class="bf1"></a>
                                    <a href="javascript:;" title="收藏" class="bf2"></a>
                                </div>
                            </li>
                        `

        }
        str+=`<!--</ul>-->`
        $("#song1").html(str)
    }
    function load2(arr){
        const songs = arr.map(obj => {
            const id = Object.keys(obj)[0];
            const name = obj[id];
            return { id, name };
        });
        // 获取 id 数组
        const idArray = songs.map(song => song.id);

        // 获取 name 数组
        const nameArray = songs.map(song => song.name);
        let str=`<!--<ul class="songlist" id="song1">-->`;
        for(let i=11;i<22;i++){
            // console.log(i)
            // console.log(arr[i])

            str+=` <li>
                                <span>${i-10}</span>
                                <a href="http://localhost:8088/dev/views/cxy/bofang.html?id=${idArray[i]}" title="${nameArray[i]}">${nameArray[i]}</a>
                                <div class="lihover">
                                    <a href="http://localhost:8088/dev/views/cxy/bofang.html?id=${nameArray[i]}" title="播放" class="bf"></a>
                                    <a href="javascript:;" title="添加播放列表" class="bf1"></a>
                                    <a href="javascript:;" title="收藏" class="bf2"></a>
                                </div>
                            </li>
                        `

        }
        // str+=`</ul>`
        $("#song4").html(str)
    }
    function load3(arr){
        const songs = arr.map(obj => {
            const id = Object.keys(obj)[0];
            const name = obj[id];
            return { id, name };
        });
        // 获取 id 数组
        const idArray = songs.map(song => song.id);

        // 获取 name 数组
        const nameArray = songs.map(song => song.name);
        let str=`<!--<ul class="songlist" id="song1">-->`;
        for(let i=22;i<33;i++){
            // console.log(i)
            // console.log(arr[i])

            str+=` <li>
                                <span>${i-21}</span>
                                <a href="http://localhost:8088/dev/views/cxy/bofang.html?id=${idArray[i]}" title="${nameArray[i]}">${nameArray[i]}</a>
                                <div class="lihover">
                                    <a href="http://localhost:8088/dev/views/cxy/bofang.html?id=${nameArray[i]}" title="播放" class="bf"></a>
                                    <a href="javascript:;" title="添加播放列表" class="bf1"></a>
                                    <a href="javascript:;" title="收藏" class="bf2"></a>
                                </div>
                            </li>
                        `

        }
        // str+=`</ul>`
        $("#song3").html(str)
    }

</script>

</body>
</html>